<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<!--编辑类型模态框-->
<div class="modal fade" id="modal-edit-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑台账统计</h4>
            </div>

            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">
                        <input type="hidden" class="form-control" name="statisId">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">年份</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control"  name="statisDate" id="statisDate2"  readonly="readonly" style="width: 102px; height: 34px;">
                                <!--onclick="changeDate('statisDate2')"-->
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label">描述</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="statisDetail" autocomplete="off" placeholder="描述">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label">已上传的Excel文件</label>
                            <div class="col-sm-8">
                                <p id="existsFile" style="font-size: 16px; margin-top: 8px;"></p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label">选择新的Excel文件并上传</label>
                            <div class="col-sm-8">
                                <input class="btn" type="file" multiple="multiple" name="file">

                            </div>
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--导入模态框-->
<div class="modal fade" id="modal-import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">文件上传</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>月份</label>
                        <input type="text" class="form-control"  id="statisDate1" name="statisDate"  readonly="readonly" style="width: 102px; height: 34px;">
                    </div>
                    <div class="form-group hidden" >
                        <label>分类</label>
                        <input type="text" class="form-control" name="statisType" autocomplete="off" placeholder="分类" style="width: 200px;">
                    </div>

                    <div class="form-group">
                        <label>描述</label>
                        <input type="text" class="form-control" name="statisDetail" autocomplete="off" placeholder="描述">
                    </div>

                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input class="btn" type="file" multiple="multiple" name="file">
                        <!--<p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>-->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-upload" type="button" class="btn btn-success" onclick="upload()">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>
        台账统计
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">

                                <div class="form-group" style="margin-right: 10px;">
                                    <label>月份</label>
                                    <input type="text" id="statisDate" name="statisDate" class="form-control"  readonly="readonly" style="width: 102px; height: 34px;">
                                </div>
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>文件名</label>
                                    <input type="text" name="statisFileType" class="form-control" placeholder="请输入文件名">
                                </div>

                                <div class="form-group" style="margin-right: 10px;">
                                    <label>描述</label>
                                    <input type="text" name="statisDetail" class="form-control" placeholder="请输入描述">
                                </div>

                                <button type="button" class="btn btn-success" id="btn-search" style="margin-top: 5px;">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>

                            </div>
                        </div>

                        <div class="row form-inline"  id="toolbar">
                            <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="uploadFile()" style="margin-right: 10px;margin-top: 5px;" shiro:hasPermission="drive:statistics:add">
                                <!--<i class="fa fa-plus"></i>-->
                                <span class="Bold">上传</span>
                            </a>
                        </div>
                    </form>
                </div>
                <div class="box-body"  style=" overflow: auto;">
                    <!--style="table-layout: fixed;word-break:break-all; word-wrap:break-word;"-->
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>


<div th:include="include :: footer"></div>

<script th:inline="javascript">

    /*
    *上传文件
     */
    function uploadFile(){
        $("input[id='statisDate1']").val(new Date().format('yyyy-MM'));
        js.updateDatePicker();
        js.modal.open("modal-import");
    }

    /** 导入表单验证 */
    js.validate.init("importForm", {
        fields: {
            file: {
                validators: {
                    notEmpty: {message: '上传文件不能为空'},
                    file: {extension: 'xls,xlsx', message: '请选择excel文件'}
                }
            }
        }
    });

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-import", function () {
        js.validate.reset("importForm");
        js.reset("importForm");
    });

    /** 文件上传按钮 */
    function upload() {
        js.validSubmit({
            formId: "importForm",
            url: ctx + "tool/statistic/upload",
            data: new FormData($("#importForm")[0]),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-import");
                }
            }
        });
    }


    /*
    *删除类型
     */
    function delType(id){
        js.confirmPost({
            content: "删除数据将无法恢复，确认删除吗？",
            url: ctx + "tool/statistic/del",
            data: {"id":id},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-edit-type");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    }

    var table;

    $(function () {
        /**
         * 日期控件的格式化
         */
        $("#statisDate").datepicker({
            format: 'yyyy-mm',
            language: 'zh-cn',
            autoclose: true,
            clearBtn: true,
            minViewMode: 1 // 最小精度选择
        }).on('hide', function (event) {
            event.stopPropagation();
        });

        /**
         * 时间默认为本月
         */
        $("input[id='statisDate']").val(new Date().format('yyyy-MM'));
        js.updateDatePicker();

        /**
         * 日期控件的格式化
         */
        $("#statisDate1").datepicker({
            format: 'yyyy-mm',
            language: 'zh-cn',
            autoclose: true,
            clearBtn: false,
            minViewMode: 1 // 最小精度选择
        }).on('hide', function (event) {
            event.stopPropagation();
        });
        /**
         * 日期控件的格式化
         */
        $("#statisDate2").datepicker({
            format: 'yyyy-mm',
            language: 'zh-cn',
            autoclose: true,
            clearBtn: false,
            minViewMode: 1 // 最小精度选择
        }).on('hide', function (event) {
            event.stopPropagation();
        });


        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "tool/statistic/list",
            showColumns: true,
            pageSize:10,
            showExport: false,
            // exportOptions:{
            //     ignoreColumn: [6]
            // },
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index, field) {
                        var pageSize = table.bootstrapTable('getOptions').pageSize;
                        var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                        // return index + 1;
                    }
                },
                { title: "文件", field: 'statisFileType'},
                { title: "描述", field: 'statisDetail'},
                { title: "上传人", field: 'statisUpUser',width:70},
                { title: "上传时间", field: 'statisUpDate',width:100},
                {
                    title: "操作",
                    width: '150',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP("drive:statistics:download")){
                            actions.push('<a class="btn btn-primary btn-xs" href="' + ctx + row.statisPath + '"> 下载</a> ');
                        }
                        if (hasP("drive:statistics:edit")){
                        actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)"  onclick="editType(' + js.jsonStringify(row) +')"> 编辑</a> ');
                        }
                        if (hasP("drive:statistics:del")) {
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delType(' + row.statisId + ')"> 删除</a> ');
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });

        /** 导入表单验证 */
        js.validate.init("typeForm-edit", {
            fields: {
                file: {
                    validators: {
                        // notEmpty: {message: '上传文件不能为空'},
                        file: {extension: 'xls,xlsx', message: '请选择excel文件'}
                    }
                }
            }
        });

        /** 编辑页面 */
        $("#btn-edit-type").click(function () {
            js.validSubmit({
                formId: "typeForm-edit",
                url: ctx + "tool/statistic/edit",
                data: new FormData($("#typeForm-edit")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-edit-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        });

        /** 导入模态框隐藏事件，重置表单，重置验证 */
        js.modal.hideEvent("modal-edit-type", function () {
            js.reset("typeForm-edit");
        });
    });

    /*
      *编辑类型
       */
    function editType(row){
        $("#typeForm-edit").fillData(row);
        var overFile="<a href=\""+ctx+row.statisPath+"\">"+row.statisFileType+"</a>";
        $("#existsFile").html(overFile);
        js.modal.open("modal-edit-type");
    }

</script>